{{include:header}}

<div class="row mb-4">
  <div class="col">
    <h1 class="h3 mb-0"><i class="bi bi-camera-video me-2"></i><span data-i18n="config.camera.title">Camera Configuration</span></h1>
    <p class="text-muted" data-i18n="config.camera.subtitle">Configure video settings, image quality, and night vision</p>
  </div>
</div>

<div class="row g-4">
  <div class="col-lg-8">
    <div class="card config-form">
      <div class="card-header">
        <h5 class="card-title mb-0"><i class="bi bi-gear me-2"></i><span data-i18n="config.camera.settings">Camera Settings</span></h5>
      </div>
      <div class="card-body">
        <form method="POST" action="/lua/config/camera">
          <div class="mb-4">
            <h6 class="text-primary mb-3"><i class="bi bi-play-circle me-2"></i><span data-i18n="config.camera.video_stream_settings">Video Stream Settings</span></h6>
            <div class="row g-3">
              <div class="col-md-6">
                <label for="resolution" class="form-label" data-i18n="config.camera.resolution">Resolution</label>
                <select id="resolution" name="resolution" class="form-select">
                  <option value="1920x1080" {{resolution_1920x1080_selected}}>1920x1080 (Full HD)</option>
                  <option value="1280x720" {{resolution_1280x720_selected}}>1280x720 (HD)</option>
                  <option value="640x480" {{resolution_640x480_selected}}>640x480 (VGA)</option>
                  <option value="320x240" {{resolution_320x240_selected}}>320x240 (QVGA)</option>
                </select>
              </div>

              <div class="col-md-6">
                <label for="fps" class="form-label" data-i18n="config.camera.frame_rate">Frame Rate (FPS)</label>
                <select id="fps" name="fps" class="form-select">
                  <option value="30" {{fps_30_selected}}>30 FPS</option>
                  <option value="25" {{fps_25_selected}}>25 FPS</option>
                  <option value="20" {{fps_20_selected}}>20 FPS</option>
                  <option value="15" {{fps_15_selected}}>15 FPS</option>
                  <option value="10" {{fps_10_selected}}>10 FPS</option>
                </select>
              </div>
            </div>

            <div class="row g-3 mt-2">
              <div class="col-md-6">
                <label for="bitrate" class="form-label" data-i18n="config.camera.bitrate">Bitrate (kbps)</label>
                <input type="number" id="bitrate" name="bitrate" class="form-control" value="{{config_bitrate}}" min="128" max="8192" step="128">
                <div class="form-text" data-i18n="config.camera.bitrate_help">Higher bitrate = better quality, more bandwidth</div>
              </div>

              <div class="col-md-6">
                <label for="codec" class="form-label" data-i18n="config.camera.video_codec">Video Codec</label>
                <select id="codec" name="codec" class="form-select">
                  <option value="h264" {{codec_h264_selected}}>H.264</option>
                  <option value="h265" {{codec_h265_selected}}>H.265 (HEVC)</option>
                </select>
              </div>
            </div>
          </div>

          <div class="mb-4">
            <h6 class="text-primary mb-3">
              <i class="bi bi-image me-2"></i><span data-i18n="config.camera.image_settings">Image Settings</span>
            </h6>

            <div class="row g-3">
              <div class="col-md-6">
                <div class="form-check">
                  <input type="checkbox" id="flip_horizontal" name="flip_horizontal" value="true" class="form-check-input" {{flip_horizontal_checked}}>
                  <label for="flip_horizontal" class="form-check-label" data-i18n="config.camera.flip_horizontal">Flip Horizontal</label>
                </div>
              </div>

              <div class="col-md-6">
                <div class="form-check">
                  <input type="checkbox" id="flip_vertical" name="flip_vertical" value="true" class="form-check-input" {{flip_vertical_checked}}>
                  <label for="flip_vertical" class="form-check-label" data-i18n="config.camera.flip_vertical">Flip Vertical</label>
                </div>
              </div>
            </div>
          </div>

          <div class="mb-4">
            <h6 class="text-primary mb-3"><i class="bi bi-moon me-2"></i><span data-i18n="config.camera.night_vision_settings">Night Vision Settings</span></h6>
            <div class="mb-3">
              <label for="night_mode" class="form-label" data-i18n="config.camera.night_mode">Night Mode</label>
              <select id="night_mode" name="night_mode" class="form-select">
                <option value="auto" {{night_mode_auto_selected}} data-i18n="common.auto">Auto</option>
                <option value="on" {{night_mode_on_selected}}>Always On</option>
                <option value="off" {{night_mode_off_selected}}>Always Off</option>
              </select>
              <div class="form-text" data-i18n="config.camera.night_mode_help">Auto mode switches based on light conditions</div>
            </div>

            <div class="row g-3">
              <div class="col-md-6">
                <label for="ir_cut" class="form-label" data-i18n="config.camera.ir_cut_filter">IR Cut Filter GPIO</label>
                <input type="text" id="ir_cut" name="ir_cut" class="form-control" value="{{config_ir_cut}}" placeholder="e.g., 25">
                <div class="form-text" data-i18n="config.camera.ir_cut_help">GPIO pin for IR cut filter control</div>
              </div>

              <div class="col-md-6">
                <label for="ir_led" class="form-label" data-i18n="config.camera.ir_led">IR LED GPIO</label>
                <input type="text" id="ir_led" name="ir_led" class="form-control" value="{{config_ir_led}}" placeholder="e.g., 26">
                <div class="form-text" data-i18n="config.camera.ir_led_help">GPIO pin for IR LED control</div>
              </div>
            </div>
          </div>

          <div class="d-grid gap-2 d-md-flex justify-content-md-end">
            <button type="submit" class="btn btn-primary"><i class="bi bi-check-lg me-1"></i><span data-i18n="config.common.save_configuration">Save Configuration</span></button>
            <button type="button" class="btn btn-secondary" onclick="window.location.reload()"><i class="bi bi-arrow-clockwise me-1"></i><span data-i18n="config.common.reset">Reset</span></button>
            <button type="button" class="btn btn-warning" onclick="testCamera()"><i class="bi bi-camera me-1"></i><span data-i18n="config.camera.test_settings">Test Settings</span></button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <div class="col-lg-4">
    <div class="row g-3">
      <div class="col-12">
        <div class="card config-sidebar">
          <div class="card-header">
            <h5 class="card-title mb-0"><i class="bi bi-activity me-2"></i><span data-i18n="config.camera.current_status">Current Status</span></h5>
          </div>
          <div class="card-body">
            <div class="camera-info">
              <div class="info-item">
                <span class="info-label" data-i18n="config.camera.sensor">Sensor:</span>
                <span class="info-value">{{config_sensor}}</span>
              </div>
              <div class="info-item">
                <span class="info-label" data-i18n="config.camera.resolution">Resolution:</span>
                <span class="info-value">{{config_resolution}}</span>
              </div>
              <div class="info-item">
                <span class="info-label">FPS:</span>
                <span class="info-value">{{config_fps}}</span>
              </div>
              <div class="info-item">
                <span class="info-label" data-i18n="config.camera.bitrate">Bitrate:</span>
                <span class="info-value">{{config_bitrate}} kbps</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-12">
        <div class="card">
          <div class="card-header">
            <h5 class="card-title mb-0"><i class="bi bi-camera me-2"></i><span data-i18n="config.camera.live_preview">Live Preview</span></h5>
          </div>
          <div class="card-body text-center">
            <img src="/lua/api/camera/snapshot" alt="Camera Preview" class="img-fluid rounded mb-3" id="previewImage">
            <div class="d-grid">
              <button class="btn btn-outline-primary" onclick="refreshPreview()"><i class="bi bi-arrow-clockwise me-1"></i><span data-i18n="config.common.refresh">Refresh</span></button>
            </div>
          </div>
        </div>
      </div>

      <div class="col-12">
        <div class="card">
          <div class="card-header">
            <h5 class="card-title mb-0"><i class="bi bi-lightning me-2"></i><span data-i18n="config.camera.quick_actions">Quick Actions</span></h5>
          </div>
          <div class="card-body">
            <div class="d-grid gap-2">
              <button class="btn btn-outline-success" onclick="takeSnapshot()"><i class="bi bi-camera me-1"></i><span data-i18n="config.camera.take_snapshot">Take Snapshot</span></button>
              <button class="btn btn-outline-warning" onclick="restartStreaming()"><i class="bi bi-arrow-repeat me-1"></i><span data-i18n="config.camera.restart_streaming">Restart Streaming</span></button>
              <button class="btn btn-outline-info" onclick="toggleNightVision()"><i class="bi bi-moon me-1"></i><span data-i18n="config.camera.toggle_night_vision">Toggle Night Vision</span></button>
            </div>
          </div>
        </div>
      </div>

      <div class="col-12">
        <div class="card">
          <div class="card-header">
            <h5 class="card-title mb-0"><i class="bi bi-question-circle me-2"></i><span data-i18n="config.common.help">Help</span></h5>
          </div>
          <div class="card-body">
            <div class="small text-muted">
              <p><strong data-i18n="config.camera.resolution">Resolution:</strong> <span data-i18n="config.camera.help_resolution">Higher resolution uses more bandwidth and storage.</span></p>
              <p><strong data-i18n="config.camera.bitrate">Bitrate:</strong> <span data-i18n="config.camera.help_bitrate">Adjust based on your network capacity.</span></p>
              <p class="mb-0"><strong data-i18n="config.camera.night_mode">Night Mode:</strong> <span data-i18n="config.camera.help_night_mode">Auto mode switches IR based on ambient light.</span></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
    function testCamera() {
        alert(window.i18n?.t('js.alert.testing_camera') || 'Testing camera settings...');
        // Implement camera test
    }

    function refreshPreview() {
        const img = document.getElementById('previewImage');
        img.src = '/lua/api/camera/snapshot?' + new Date().getTime();
    }

    function takeSnapshot() {
        window.open('/lua/api/camera/snapshot', '_blank');
    }

    function restartStreaming() {
        if (confirm(window.i18n?.t('js.alert.restart_streaming_confirm') || 'Restart streaming service? Video may be interrupted briefly.')) {
            fetch('/lua/api/system/restart-streaming', { method: 'POST' })
                .then(response => response.json())
                .then(data => {
                    alert(window.i18n?.t('js.alert.streaming_restarted') || 'Streaming service restarted');
                    setTimeout(() => refreshPreview(), 3000);
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert(window.i18n?.t('js.alert.streaming_restart_failed') || 'Failed to restart streaming');
                });
        }
    }

    function toggleNightVision() {
        fetch('/lua/api/camera/night-vision', { method: 'POST' })
            .then(response => response.json())
            .then(data => {
                alert(data.message);
                setTimeout(() => refreshPreview(), 1000);
            })
            .catch(error => {
                console.error('Error:', error);
                alert(window.i18n?.t('js.alert.night_vision_failed') || 'Failed to toggle night vision');
            });
    }

    // Auto-refresh preview every 30 seconds
    setInterval(refreshPreview, 30000);
</script>

{{include:footer}}
